<template>
  <div>
    <goga-header title="订单信息">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <img v-if="process<100" class="gxb-loading" src="../../assets/loding.gif" alt="">
    <div v-if="process==100" class="tempOrder-wrapper">
      <router-link class="temp-address" :to="{name:'address'}">
        <div class="temp-address-l" v-if="getOrder.address">
          <div class="top">
            <span>{{getOrder.address.aName}}</span>
            <span>{{getOrder.address.aPhone}}</span>
          </div>
          <div class="bot">
            {{getOrder.address.aShen}}{{getOrder.address.aShi}}{{getOrder.address.aXian}}{{getOrder.address.aDetail}}
          </div>
        </div>
        <div class="temp-address-l" v-if="!getOrder.address">请添加收货地址</div>
        <icon symbol="right"></icon>
      </router-link>
      <div>
        <div class="order-shop" v-if="getOrder.shop">
          <router-link :to="{name:'shop',params:{shopId: getOrder.shop.warehouseSn}}" class="p-header" >
            <div class="p-shop">
              <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+getOrder.shop.wPic">
              </div>
              <div class="p-name">{{getOrder.shop.wName}}</div>
              <icon symbol="right"> </icon>
            </div>
          </router-link>
        </div>
        <div class="order-goods" v-if="goodsTC.length">
          <div class="tit">
            商品:套餐类
          </div>
          <div class="order-goods-list">
            <router-link class="item" v-for="goods in goodsTC" :to="{name:'goods',params:{id: goods.goSn}, query:{shop:getOrder.shop.warehouseSn}}"
                         :key="goods.goSn">
              <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+goods.goCover">
              </div>
              <div class="p-info">
                <div class="p-name">{{goods.goName}}</div>
                <div class="p-guige"><span v-if="goods.goMade">{{goods.goMade}}</span></div>
                <div class="p-price">
                  <span>¥{{goods.goPrice}}</span>
                  <span>×{{goods.goNum}}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="order-goods" v-if="goodsDP.length">
          <div class="tit">
            商品:单品类
          </div>
          <div class="order-goods-list">
            <router-link class="item" v-for="goods in goodsDP" :to="{name:'goods',params:{id: goods.goSn},query:{shop:getOrder.shop.warehouseSn}}"
                         :key="goods.goSn">
              <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+goods.goCover">
              </div>
              <div class="p-info">
                <div class="p-name">{{goods.goName}}</div>
                <div class="p-guige">{{goods.unit}}</div>
                <div class="p-price">
                  <span>¥{{goods.goPrice}}</span>
                  <span>×{{goods.goNum}}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="order-set">
          <div @click="link({name:'coupon-choose'})">
            <cell title="优惠券" is-link>
              <span v-if="!getOrder.coupon.id"><span v-if="getCoupon.list.length==0"
                                                     class="text-disable">无可用优惠券</span><span
                v-if="getCoupon.list.length>0">使用优惠券</span></span>
              <span v-if="getOrder.coupon.id">{{getOrder.coupon.name}}</span>&nbsp;
              <icon symbol="right"></icon>
            </cell>
          </div>
          <cell :title="'积分可抵¥'+getOrder.integral" v-show="getOrder.integral">
            <div class="xxcf-switch">
              <input class="xxcf-switch-core" type="checkbox" id="isDefault" v-model="useIntegral">
            </div>
          </cell>
          <cell title="积分" v-show="getOrder.integral==0">
          <span class='text-disable'>暂无可抵用积分</span>
          </cell>
          <cell title="运费" v-if="getOrder.price">¥{{getOrder.price.oFreight}}</cell>
          <cell title="其他减免" v-if="getOrder.price">¥{{getOrder.price.oDiscount}}</cell>
        </div>
        <div class="order-remark">
          <textarea placeholder="用户留言" v-model="oRemarks"></textarea>
        </div>
      </div>
      <div class="order-footer border-t">
        <div class="left">合计: <strong>{{getOrder.price.oMoney}}</strong></div>
        <button :disabled="submitDisabled" @click="submit()"><span v-show="submitDisabled">正在提交</span><span
          v-show="!submitDisabled">提交订单</span></button>
      </div>

    </div>
  </div>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import Cell from '@components/cell'
  const fetchDefaulAdress = async function (store) {
    await store.dispatch('backend/tempOrder/getDefaultAddress')
  }
  const fetchGoodsList = async function (store, orderId) {
    await store.dispatch('backend/tempOrder/getOrderGoods', orderId)
  }
  const fetchPrice = async function (store, orderId) {
    await store.dispatch('backend/tempOrder/getPrice', orderId)
  }
  const fetchCoupon = async function (store, orderId) {
    await store.dispatch('backend/tempOrder/getCoupon', orderId)
  }
  export default {
    components: {
      gogaHeader,
      Icon,
      Cell
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        getOrder: 'backend/tempOrder/getOrder',
        goodsTC: 'backend/tempOrder/goodsTC',
        goodsDP: 'backend/tempOrder/goodsDP',
        getCoupon: 'backend/tempOrder/getCoupon'
      }),
      getIntegral() {
        return this.getOrder.integral/100
      }
    },
    data () {
      return {
        process: 0,
        oDeliveryDate: '',
        submitDisabled: false,
        oRemarks: '',
        useIntegral: false
      }
    },
    watch: {
      ['useIntegral'] (newValue) {
        this.$store.dispatch('backend/tempOrder/useIntegral', newValue)
      }
    },
    async mounted() {
      let orderId = this.$route.params.orderId
      if (!this.getOrder.address || orderId != this.getOrder.id) {
        await  fetchDefaulAdress(this.$store);
      }
      if (this.getOrder.goods.length == 0 || orderId != this.getOrder.id) {
        await fetchGoodsList(this.$store, orderId)
      }
      if (!this.getOrder.price || orderId != this.getOrder.id) {
        await fetchPrice(this.$store, orderId)
      }
      if (this.getCoupon.list.length == 0 || orderId != this.getOrder.id) {
        await fetchCoupon(this.$store, orderId)
      }
      this.$store.dispatch('backend/tempOrder/setOrderId', orderId);
      await this.$store.dispatch('backend/tempOrder/changePrice');
      let {data: {StatusCode, timeList}} =await api.get('api/v1/Other/timeStamp.ashx');
      let time = timeList.filter(function (item) {
        return item.canChoose === 1
      })
      let today = time[0];
      this.oDeliveryDate = today.year + '-' + today.month + '-' + today.day;
      this.useIntegral = this.getOrder.useIntegral;
      this.process = 100;
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      link (conf) {
        this.$router.push(conf);
      },
      async submit(){
        let orderSn = this.$route.params.orderId;
        let oAddress = this.getOrder.address.id;
        let oDeliveryDate = this.oDeliveryDate;
        let oCouponSn = this.getOrder.coupon.couponSn;
        let oIntegral = this.getOrder.useIntegral ? this.getOrder.integral*100 : 0;
        let isPickUp = 0;
        let pickUpSn = '';
        let oRemarks = this.oRemarks;
        let {data:{StatusCode, Status}} = await api.post('api/v2/Order/addOrder.ashx', {
          orderSn,
          oAddress,
          oDeliveryDate,
          oCouponSn,
          oIntegral: Math.ceil(oIntegral),
          isPickUp,
          pickUpSn,
          oRemarks
        });
        if (StatusCode === '200') {
          this.$store.dispatch('global/toast', '提交成功');
          this.$store.dispatch('frontend/cart/clearCart', this.getOrder.shop.warehouseSn)
          this.$router.push({name: 'pay', params: {orderID: orderSn}})

        } else if (StatusCode === '403') {
          this.$store.dispatch('global/toast', Status);
        } else if (StatusCode === '404') {
          this.$store.dispatch('global/toast', '该订单已存在,请重新下单');
          this.goBack();
        }
        this.submitDisabled = false
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
